<template>
  <div>
    <h1>组合式+Ts语法演示</h1>
    <!-- <PropsDemo name="三丰" :score="score" @change-score="handleScore" />
    <DataDemo /> -->
    <FnRefDemo />
    <ProvideInjectDemo ref="compRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue";
import PropsDemo from "./props-demo.vue";
import DataDemo from "./data-demo.vue";
import FnRefDemo from "./fn-ref-demo.vue";
import ProvideInjectDemo from "./provide-inject-demo.vue";
const score = ref<number>(100);
const handleScore = (n: number) => {
  score.value += n;
};

// 依赖注入
provide("colorObj", "red");

// 为组件模板ref约定类型
const compRef = ref<InstanceType<typeof ProvideInjectDemo> | null>(null);
</script>

<style scoped></style>
